<!DOCTYPE html>
<!-- saved from url=(0037)http://localhost:8080/calculator.html -->
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>计算器</title>
	<style>
		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
			font-style: sans-serif;
		}

		body {
			width: 100%;
			height: 100%;
			font-family: 'Open Sans', sans-serif;
			margin: 0;
			background-color: #af9c9f;
		}

		#header {
			background-color: rgb(0, 0, 0);
			color: white;
			text-align: center;
			padding: 5px;
			height: 165px;
		}

		#nav {
			line-height: 30px;
			background-color: #9c9393;
			height: 500px;
			width: 200px;
			float: left;
			padding: 5px;
			text-align: center;
		}

		#section {
			line-height: 30px;
			background-color: #9c9393;
			height: 500px;
			width: 200px;
			float: right;
			padding: 5px;
			text-align: center;
		}

		#footer {
			background-color: black;
			color: white;
			clear: both;
			text-align: center;
			padding: 5px;
		}

		#login {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -150px 0 0 -150px;
			width: 300px;
			height: 300px;
		}

		h1 {
			font-size: 2em;
			margin: 0.67em 0;
		}

		input {
			width: 278px;
			height: 18px;
			margin-bottom: 10px;
			outline: none;
			padding: 10px;
			font-size: 13px;
			color: #fff;
			text-shadow: 1px 1px 1px;
			border-top: 1px solid #312E3D;
			border-left: 1px solid #312E3D;
			border-right: 1px solid #312E3D;
			border-bottom: 1px solid #56536A;
			border-radius: 4px;
			background-color: #2D2D3F;
		}

		.but {
			width: 100px;
			min-height: 50px;
			display: block;
			background-color: #4a77d4;
			border: 1px solid #3762bc;
			color: #fff;
			padding: 9px 14px;
			font-size: 15px;
			line-height: normal;
			border-radius: 5px;
			margin: 100px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div id="header">
			<br>
			<h1>This is a calculator</h1>
		</div>

		<div id="nav">
			<h1>+</h1><br>
			<h1>-</h1><br>
			<h1>*</h1><br>
			<h1>/</h1><br>
			<h1>%</h1><br>
		</div>

		<div id="login">
			<label>第一个数</label><input v-model='submit_data.data1' required="required">
			<label>运算符</label><input v-model='submit_data.op' required="required">
			<label>第二个数</label><input v-model='submit_data.data2' required="required">
			<button @click="submit" style="width: 100px; height: 30px; background-color: #9c9393;" round>结果</button><br>
			<label>结果</label><input v-model='result' id="res" type="text" name="res">

		</div>

		<div id="section">
			<h1>+</h1><br>
			<h1>-</h1><br>
			<h1>*</h1><br>
			<h1>/</h1><br>
			<h1>%</h1><br>
		</div>

		<div id="footer">
			Copyright ? 07111809-bit.com
		</div>
	</div>
</body>

<script src="./query_files/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			submit_data: {
				data1: null,
				data2: null,
				op: null
			},
			result: null
		},

		methods: {
			submit: function () {
				if (this.submit_data.data1 == null || this.submit_data.data2 == null || this.submit_data.op ==
					null) {
					window.confirm("请输入数字和运算符")
				} else {
					let k = this
					axios({
						method: 'post',
						url: '/cgi-bin/calculator',
						dataType: 'json',
						data: this.submit_data
					}).then(function (response) {
						k.result = response.data.res;
					})
				}

			}
		}
	})
</script>

</html>